<template>
    <div>
        <header class="pr white" style="padding: 45px 0px 40px;">
            <img src="../../assets/images/7.jpg" class="displayB centerauto shadowB" style="max-width: 70%;margin: 0px auto;padding: 10px;background: #fff;" />
        </header>
        <van-cell-group>
            <van-field label="邮箱：" v-model="form.u_email" :error-message="rules.u_email" placeholder="请输入邮箱地址" />
            <van-field v-model="form.u_email_code" center label="邮箱验证码" placeholder="请输入邮箱验证码" :error-message="rules.u_email_code">
                <van-button slot="button" size="small" type="primary" :disabled="countdown" @click="getmcode">{{getcodeTxt}}</van-button>
            </van-field>
            <van-field label="密码：" type="password" maxlength="6" v-model="form.u_password" placeholder="请输入密码" :error-message="rules.u_password" />
            <van-field label="确认密码：" type="password" maxlength="6" v-model="form.confirm_password" placeholder="再次输入密码" :error-message="rules.confirm_password" />
        </van-cell-group>
        <div class="text-center margin_t50">
            <van-button type="primary" class="width_80p btn_size_40" @click="onSubmit">确 定</van-button>
        </div>
    </div>
</template>
<script>

    import { isvalidPhone, isvalidTel, checkEmail, checkIdcard } from '@/assets/js/validate.js'
    import '@/assets/css/main.css'
    export default {
        data(){
            return{
                getcodeTxt: '获取验证码',
                countdown: false,  //60s倒计时  按钮不可点击
                form: {
                    'u_email': '',
                    'u_email_code': '',
                    'u_password': '',
                    'confirm_password': '',
                },
                rules: {
                    'u_email': '',
                    'u_email_code': '',
                    'u_password': '',
                    'confirm_password': '',
                },
            }
        },
        methods: {
            //校验字段
            verification(obj){

                let state = true;
                
                //自定义校验
                if(!checkEmail(this.form.u_email)){
                    this.rules.u_email = '请输入正确的邮箱地址';
                    return false;
                }else{
                    this.rules.u_email = '';
                    state = false;
                }

                //不为空的校验
                
                for(var i = 0;i<obj.zero.length;i++){
                    if(this.form[obj.zero[i].name] == ''){
                        this.rules[obj.zero[i].name] = obj.zero[i].error;
                        return false;
                    }else{
                        this.rules[obj.zero[i].name] = '';
                        state = false;
                    }
                }

                //两次密码的校验
                if(this.form.u_password != this.form.confirm_password){
                    this.rules.confirm_password = '两次密码输入不一致';
                    return false;
                }else{
                    this.rules.confirm_password = '';
                    state = false;
                }

                if(!state){
                    return true;
                }

            },
            //提交
            onSubmit(){

                var _this = this;
                
                let obj = {};
                obj.zero = [
                    {'name': 'u_email_code','error': '请输入邮箱验证码'},
                    {'name': 'u_password','error': '请输入密码'},
                    {'name': 'confirm_password','error': '请再次输入密码'},
                ];
                obj.customized = ['u_email'];
                
                if(_this.verification(obj)){
                    //提交
                    this.$httpPost('/api/index/login/retrieve',_this.form).then(response => {
                    
                        if(response.code == 200){

                            _this.$toast(response.msg);

                            setTimeout(() => {
                                _this.$router.push({
                                    path: '/login',
                                });
                            }, 2000);
                            

                        }else{
                            
                            this.$toast(response.msg);
                        }

                    });
                    
                }
            },
            //获取验证码
            getmcode(){
                
                var _this = this;
                
                if(!_this.form.u_email){
                    _this.$toast('请先输入邮箱地址');
                    return;
                }else{
                    if(!checkEmail(this.form.u_email)){
                        _this.$toast('请输入正确的邮箱地址');
                        return;
                    }
                }

                this.$httpGet('/api/index/mail/email',{
                    'u_email': _this.form.u_email,
                    'type': 2,
                }).then(response => {
                
                    if(response.code == 200){
                        _this.$toast(response.msg);

                    }else{
                        
                        _this.$toast(response.msg);
                    }

                });
                this.countdownFun();
            },
            //验证码  60s   倒计时
            countdownFun(){
                
                var _this = this;
                let time = 60;
                _this.getcodeTxt = time + 's后重试';
                _this.countdown = true;
                let interval = setInterval(() => {
                    if(time > 0){
                        time --;
                        _this.getcodeTxt = time + 's后重试';
                    }else{
                        clearInterval(interval);
                        _this.countdown = false;
                        _this.getcodeTxt = '获取验证码';
                    }
                }, 1000);
            },
        },
        mounted(){
            
        },
    }
</script>